<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备升级中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
            outline: none !important;
        }

        body {
            background: white;
            min-height: 100vh;
            padding: 2rem;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .upgrade-module {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            margin-bottom: 1.5rem;
            padding: 1.5rem;
        }

        .online-upgrade {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .router-icon {
            width: 56px;
            height: 56px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232963eb" d="M19 14v2h2v3H3v-3h2v-2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2M6 14h2v2H6v-2m5 0h2v2h-2v-2m-5-5h12v2H6V9z"/></svg>');
        }

        .device-info {
            flex: 1;
        }

        .device-name {
            font-size: 1.3rem;
            color: #1a1a1a;
            margin-bottom: 4px;
            font-weight: 600;
        }

        .latest-tag {
            color: #42a5f5;
            font-size: 0.9rem;
            margin-bottom: 6px;
        }

        .version-info {
            color: #666;
            font-size: 0.9rem;
            letter-spacing: 0.2px;
        }

        .check-update-btn,
        .upgrade-btn {
            background: linear-gradient(135deg, #2963eb, #42a5f5);
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            cursor: pointer;
            transition: transform 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        .check-update-btn:active,
        .upgrade-btn:active {
            transform: scale(0.98);
        }

        .local-upgrade {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .file-input-wrapper {
            flex: 1;
            position: relative;
            border: 2px dashed #e0e0e0;
            border-radius: 8px;
            padding: 12px;
            transition: border-color 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        .file-input-wrapper:active {
            border-color: #2963eb;
        }

        .file-input {
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .file-label {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
        }

        .upload-icon {
            width: 24px;
            height: 24px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232963eb" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zm-5-7v4h-2v-4H8l4-4 4 4h-3z"/></svg>');
        }

        .log-module {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            padding: 1.5rem;
        }

        .log-title {
            font-size: 1.1rem;
            color: #333;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .log-content {
            background: #f8f9ff;
            border-radius: 8px;
            padding: 1rem;
            height: 200px;
            overflow-y: auto;
        }

        .log-item {
            padding: 8px 0;
            font-size: 0.9rem;
            border-bottom: 1px solid #eee;
            line-height: 1.5;
        }

        .log-item:last-child {
            border-bottom: none;
        }

        .timestamp {
            color: #999;
            margin-right: 12px;
        }

        .log-item.info { color: #666; }
        .log-item.success { color: #2e7d32; }
        .log-item.error { color: #d32f2f; }
        .log-item.progress { color: #2963eb; }
    </style>
</head>
<body>
    <div class="container">
        <div class="upgrade-module">
            <div class="online-upgrade">
                <div class="router-icon"></div>
                <div class="device-info">
                    <div class="device-name">TM70</div>
                    <div class="latest-tag">已经是最新版本</div>
                    <div class="version-info">当前版本: V1.0</div>
                </div>
                <button class="check-update-btn">检测新版本</button>
            </div>
        </div>

        <div class="upgrade-module">
            <div class="local-upgrade">
                <div class="file-input-wrapper">
                    <input type="file" class="file-input" id="fileInput">
                    <label for="fileInput" class="file-label">
                        <div class="upload-icon"></div>
                        <span>请添加升级包文件</span>
                    </label>
                </div>
                <button class="upgrade-btn">本地升级</button>
            </div>
        </div>

        <div class="log-module">
            <div class="log-title">执行日志</div>
            <div class="log-content" id="logContent"></div>
        </div>
    </div>

    <script>
        class Logger {
            constructor() {
                this.logContainer = document.getElementById('logContent');
                this.add('系统初始化完成', 'info');
                this.add('当前版本检测：V1.0', 'info');
            }

            add(message, type = 'info') {
                const logItem = document.createElement('div');
                logItem.className = `log-item ${type}`;
                logItem.innerHTML = `<span class="timestamp">[${new Date().toLocaleTimeString()}]</span>${message}`;
                this.logContainer.appendChild(logItem);
                this.logContainer.scrollTop = this.logContainer.scrollHeight;
            }
        }

        const logger = new Logger();

        document.querySelector('.check-update-btn').addEventListener('click', () => {
            logger.add('开始检测新版本...', 'progress');
            setTimeout(() => {
                logger.add('连接到更新服务器...', 'progress');
                setTimeout(() => logger.add('当前已是最新版本', 'success'), 800);
            }, 500);
        });

        document.querySelector('.upgrade-btn').addEventListener('click', async () => {
            const fileInput = document.getElementById('fileInput');
            if (!fileInput.files.length) {
                logger.add('错误：请先选择升级文件', 'error');
                return;
            }

            const file = fileInput.files[0];
            logger.add(`开始处理升级文件：${file.name}`, 'progress');

            try {
                await new Promise(r => setTimeout(r, 800));
                logger.add('验证文件完整性...', 'progress');
                await new Promise(r => setTimeout(r, 1000));
                logger.add('检查版本兼容性...', 'progress');
                
                const progressInterval = setInterval(() => {
                    logger.add('升级进行中：正在写入系统分区...', 'progress');
                }, 1500);

                setTimeout(() => {
                    clearInterval(progressInterval);
                    logger.add('系统升级成功，请重启设备', 'success');
                }, 3000);

            } catch (error) {
                logger.add(`升级失败：${error.message}`, 'error');
            }
        });
    </script>
</body>
</html>